'use strict';
import React from "react";
import {StyleSheet, View} from "react-native";
import Container from "../../component/common/Container";
import NavigationBar from "../../component/navigation/NavigationBar";
import MyPublishList from "../../component/mine/MyPublishList";
import SegmentedView from "../../component/segmented/SegmentedView";
import {inject, observer} from 'mobx-react'

@inject('mineStore')
@observer
class MyPublish extends React.Component {

    constructor(props) {
        super(props);
        this.data = [
            {title: '待审核', type: 0},
            {title: '审核通过', type: 1}
        ];
        this.page = 1;
        this.limit = 10;
    }

    componentDidMount() {

    }

    onRefresh = async () => {
        let {mineStore} = this.props;
        let data = {
            page: this.page,
            limit: this.limit,
            audit_status: 'wait',
            author_id: global.secretKey,
        };
        let result = await mineStore.requestMyPublish(0, data);
    };

    _onPressPublish = () => {
        ActionsManager.show({
            title: '',
            actions: [
                {
                    title: '发布文章',
                    onPress: () => RouterHelper.navigate('文章发布', 'PublishArticle', {
                        onCallBack: () => this.onRefresh()
                    })
                },
                {
                    title: '发布视频',
                    onPress: () => RouterHelper.navigate('视频发布', 'PublishVideo', {
                        onCallBack: () => this.onRefresh()
                    })
                },
            ]
        });
    };

    render() {
        const {params} = this.props.navigation.state;
        const pageTitle = params.pageTitle || '我的发布';

        return (
            <Container
                styles={styles.container}
            >
                <NavigationBar
                    title={pageTitle}
                    renderRightAction={[{
                        icon: Images.icon_publish_add,
                        iconStyle: {width: 17, height: 17, marginRight: 5},
                        onPress: () => this._onPressPublish()
                    }]}
                />

                <SegmentedView
                    ref={(v) => this.segmentedRef = v}
                    barStyle={styles.barStyle}
                    showSegmentedBar={true}
                    scrollEnabled={false}
                    indicatorLineWidth={0}
                    indicatorLineColor={null}
                    showRightMenu={false}
                >
                    {this.data.map((item, index) => {
                        return (
                            <View
                                key={`item_${index}`}
                                title={item.title}
                                style={styles.segmentedItem}
                                titleStyle={styles.titleStyle}
                                activeTitleStyle={styles.activeTitleStyle}>
                                <MyPublishList
                                    type={item.type}
                                />
                            </View>
                        )
                    })}
                </SegmentedView>
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },
    barStyle: {
        paddingHorizontal: 80,
    },
    titleStyle: {
        fontSize: FontSize(14),
        color: '#878787',
        backgroundColor: 'transparent',
        paddingVertical: 3,
        borderRadius: 2,
        paddingHorizontal: 5,
    },
    activeTitleStyle: {
        fontSize: FontSize(14),
        color: '#fff',
        backgroundColor: Theme.themeColor,
        paddingHorizontal: 5,
        paddingVertical: 3,
        borderRadius: 2,
    },
    sep: {
        height: Theme.minPixel,
        backgroundColor: '#f5f5f5',
        marginLeft: 15,
        marginRight: 15,
    },
});

export default MyPublish